<template>
  <!-- 会员等级 -->
  <div>
    <!--表格 -->
    <div>
      <el-table
        :data="tableData"
        border
        max-height="700px"
        style="width: 100%"
       
      >
        <el-table-column prop="num" label="排列序号" align="center">
          <template v-slot="scope">
            <span
               v-if="scope.row.isInput==false">{{scope.row.num}}</span
            >
            <el-input  v-else="" v-model="inputData.xuhao" style="width: 70%" placeholder="请输入排列序号">
            </el-input>
          </template>
        </el-table-column>

        <el-table-column prop="levName" label="等级名称" align="center">
          <template v-slot="scope">
            <span
            v-if="scope.row.isInput==false"  
            >{{scope.row.levName}}</span
            >
            <el-input v-else="" style="width: 70%" placeholder="请输入会员等级">
            </el-input>
          </template>
        </el-table-column>

        <el-table-column prop="shoppingValue" label="购物达标值" align="center">
          <template v-slot="scope">
            <span
            v-if="scope.row.isInput==false"  
            >{{scope.row.shoppingValue}}</span
            >
            <el-input v-else="" style="width: 70%" placeholder="请输入购物达标值">
            </el-input>
          </template>
        </el-table-column>

        <el-table-column prop="updateTime" label="更新时间" align="center">
        </el-table-column>

        <el-table-column prop="operator" label="操作员" align="center">
          <template v-slot="scope">
            <el-button
            v-if="scope.row.isInput==false"
              @click="editClick(scope.row,scope.$index)"
              type="text"
              size="mini"
              style="color: rgb(41, 59, 109)"
              >编辑
            </el-button>

            <el-button
            v-else="scope.row.isInput==true"
              @click="confineClick(scope.row,scope.$index)"
              type="text"
              size="mini"
              style="color: rgb(41, 59, 109)"
              >添加
            </el-button>

          </template>
        </el-table-column>
      </el-table>

      <el-table
        :data="tableData1"
        stripe
        border
        max-height="700px"
        style="width: 100%;margin-top: 0%;"
      >
        <el-table-column prop="num" label="" align="center">
          <template v-slot="scope">

            <el-input v-model="inputData.xuhao" style="width: 70%" placeholder="请输入排列序号">
            </el-input>
          </template>
        </el-table-column>

        <el-table-column prop="levName" label="" align="center">
          <template v-slot="scope">
            <el-input style="width: 70%" placeholder="请输入会员等级">
            </el-input>
          </template>
        </el-table-column>

        <el-table-column prop="shoppingValue" label="" align="center">
          <template v-slot="scope">
            <el-input style="width: 70%" placeholder="请输入购物达标值">
            </el-input>
          </template>
        </el-table-column>

        <el-table-column prop="updateTime" label="" align="center">
        </el-table-column>

        <el-table-column prop="operator" label="" align="center">
          <template v-slot="scope">
            <el-button
              @click="detailClick(scope.row)"
              type="text"
              size="mini"
              style="color: rgb(41, 59, 109)"
              >添加
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
export default {
  name: "memberLev",
  data() {
    return {
      tableData: [
        {
          num: "1",
          levName: "一级会员",
          shoppingValue: "10", //购物达标值
          updateTime: "2023年11月27日16:50", //更新时间
          isInput:false,// 点击编辑改变状态

        },
        {
          num: "2",
          levName: "二级会员",
          shoppingValue: "10", //购物达标值
          updateTime: "2023年11月27日16:50", //更新时间
          isInput:false,// 点击编辑改变状态

        },
        {
          num: "3",
          levName: "三级会员",
          shoppingValue: "10", //购物达标值
          updateTime: "2023年11月27日16:50", //更新时间
          isInput:false,// 点击编辑改变状态

        },
        {
          num: "4",
          levName: "四级会员",
          shoppingValue: "10", //购物达标值
          updateTime: "2023年11月27日16:50", //更新时间
          isInput:false,// 点击编辑改变状态

        },
      ],
      tableData1: [
        {
          num: "",
          levName: "",
          shoppingValue: "", //购物达标值
          updateTime: "", //更新时间
        },
      ],

      inputData:{
        xuhao:'',
        lev:'',
        value:'',
      },
    };
  },
  computed: {},

  methods: {
    onload(){
      console.log("哈哈");
    },
    //编辑
    editClick(row,index) {
      console.log(row,index);
      this.tableData[index].isInput = true
      
    },
    //确定
    confineClick(row,index){
      console.log(row,index);
      this.tableData[index].isInput = false

    }
  },
};
</script>

<style scoped></style>
